<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>航班选座</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
	
	<script src="../../element/static/js/jquery-3.5.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
});
var option;

$.get('./static/flight-seats.svg', function (svg) {
	echarts.registerMap('flight-seats', {svg: svg});
	const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
	option = {
		tooltip: {},
		geo: {
			map: 'flight-seats',
			roam: true,
			selectedMode: 'multiple',
			layoutCenter: ['50%', '50%'],
			layoutSize: '95%',
			tooltip: {
				show: true
			},
			itemStyle: {
				color: '#fff'
			},
			emphasis: {
				itemStyle: {
					color: undefined,
					borderColor: 'green',
					borderWidth: 2
				},
				label: {
					show: false
				}
			},
			select: {
				itemStyle: {
					color: 'green'
				},
				label: {
					show: false,
					textBorderColor: '#fff',
					textBorderWidth: 2
				}
			},
			regions: makeTakenRegions(takenSeatNames)
		}
	};
	function makeTakenRegions(takenSeatNames) {
		var regions = [];
		for (var i = 0; i < takenSeatNames.length; i++) {
			regions.push({
				name: takenSeatNames[i],
				silent: true,
				itemStyle: {
					color: '#bf0e08'
				},
				emphasis: {
					itemStyle: {
						borderColor: '#aaa',
						borderWidth: 1
					}
				},
				select: {
					itemStyle: {
						color: '#bf0e08'
					}
				}
			});
		}
		return regions;
	}
	// console.log(option);
	myChart.setOption(option);
	
	// 获取选定的座位
	myChart.on('geoselectchanged', function (params) {
		const selectedNames = params.allSelected[0].name.slice();
		// 移走已就座的座位
		for (var i = selectedNames.length - 1; i >= 0; i--) {
			if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
				selectedNames.splice(i, 1);
			}
		}
		console.log('selected', selectedNames);
	});
});

// if (option && typeof option === 'object') {
// 	myChart.setOption(option);
// }
// window.addEventListener('resize', myChart.resize);
</script>
</html>